<template>
	<e-charts class="chart1" :option="option" />
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
import { useRoute } from 'vue-router'
	import {maintenanceStatistics} from '@/api'
	
	const route = useRoute()
	const username = ref('')
	
	
	const option = ref({
		title: {
			text: '救援事件发生',
			textStyle: {
				color: '#be1d5b',
				fontStyle: 'normal',
				fontWeight: 'bold',
				fontFamily: 'sans-serif',
				fontSize: 18,
				lineHeight: 20,
				shadowColor: 'rgba(0, 0, 0, 0.5)',
				shadowBlur: 5,
				shadowOffsetX: 2,
				shadowOffsetY: 2
			},
		},
		legend: {
			show: false
		},
		grid: {
			top: '15%',
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			max: 10,
			show: false,
			type: 'value'
		},
		yAxis: {
			show: true,
			type: 'category',
			data: ['电梯告警总数', '救援事件发生', '电梯维保次数', '维修工单处置', '救援处置发生'],
			axisLabel: {
				color: '#dadada',
				fontSize: 15
			},
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			}
		},
		series: [{
			name: '进度',
			type: 'bar',
			barWidth: 55, // 调整为更细的进度条
			data: [], // 5个进度值
			label: {
				show: true,
				position: 'right',
				formatter: '{c}', // 添加百分号
				fontSize: 20,
				color: '#333'
			},
			itemStyle: {
				color: function(params) {
					// 为不同进度条设置不同颜色
					const colorList = ['#f08639', '#67c23a', '#409eff', '#e6a23c', '#f56c6c'];
					return colorList[params.dataIndex];
				},
				borderRadius: [20, 20, 20, 20] // 圆角
			},
			showBackground: true,
			backgroundStyle: {
				color: '#f0f0f0',
				borderRadius: [20, 20, 20, 20]
			},
			animationDuration: 1000,
			animationEasing: 'elasticOut'
		}]
	});
	const ff  =() =>{
		 username.value = route.query.username || ''
		maintenanceStatistics(username.value).then(r=>{
			// console.log(33333,r)
			
			option.value.series[0].data = Object.values(r.data);
			// option.value.series[0].data = Object.values(r.data).map(value => value + 20);
			console.log(33333,option.value.series[0].data)
		})
	}
	
	onMounted(()=>{
		ff()
	})
</script>

<style scoped>
	.chart1 {
		margin: 20px 0;
		height: 650px; /* 增加高度以适应5个进度条 */
		width: 350px;
		align-items: center;
		border: 1px solid #37478f;
	}
</style>